<template>
	<div>
		<ul>
			<li v-for="item in imgList" :key="item.name">
				<img style="width:50px;height: 100px;" :src="item.url" alt="" />
				<span>{{ item.name }}</span>
				<el-button size="small" style="margin:5px;" @click="onDeleteClick(item)"
					>删除</el-button
				>
				<el-button size="small" @click="onDownLoadClick(item)">下载</el-button>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data() {
		return {
			imgList: []
		}
	},
	created() {
		this.getImageList()
	},
	methods: {
		async getImageList() {
			const imgData = await this.$http.get('/api/imageList')
			console.log(imgData, 'imgData')
			this.imgList = imgData.data
		},
		async onDeleteClick(item) {
			console.log(item, 'item删除')
			// api/deleteFile -> api -> http://localhost:7001/api/deleteFile
			const data = await this.$http.delete(
				`/api/deleteImage?imgPath=${item.name}`
			)
			console.log(data, '删除')
			this.getImageList()
		},
		async onDownLoadClick(item) {
			console.log(item, 'item下载')
			const data = await this.$http.post('/api/downloadImage', {
				imgPath: item.name
			})
			console.log(data, 'data')
		}
	}
}
</script>
